<!-- 登录 -->
<script setup>
import { reactive, computed, onMounted } from 'vue'
import { getPublicKey, getLoginUrl } from '@/api'
import { ElMessage } from "element-plus"
import { encrypt } from '@/uilts/rsa'
const state = reactive({
  userName: '',
  password: '',
  checked: false,
  isBtnLoading: false,
  publicKey: null
})
//  计算登录框
const scaleStyle = computed(() => {
  let screenWid =
    document.documentElement.offsetWidth || document.body.offsetWidth;
  screenWid = screenWid < 1360 ? 1360 : screenWid;
  const scale = screenWid / 1920;
  const style = `transform: translate(0%, -${50}%) scale(${scale});top: ${50}%;right: ${119 * scale}px`;
  return style;
})
//  获取密钥
const publicKeyAjax = async () => {
  try {
    const { data } = await getPublicKey()
    if (!data.publicKey) {
      ElMessage.error('获取公钥失败，无法登录！请稍后再试')
      return
    }
    state.publicKey = data.publicKey
  } catch (error) {
    console.log(error)
  }
}
// 登录
import { useRouter } from 'vue-router'
const $router = useRouter()
import useUserStore from '@/store/modules/user'
const UserStore = useUserStore()
const login = async () => {
  if (!state.publicKey) {
    ElMessage.error('获取公钥失败，无法登录！请稍后再试')
    return
  }
  try {
    const parmas = {
      username: encrypt(state.userName, state.publicKey),
      password: encrypt(state.password, state.publicKey),
      // "remember-me": true
    }
    const { code, data, message } = await getLoginUrl(parmas)
    if (code !== 0) {
      ElMessage.error(message)
      return
    } else {
      UserStore.setUserInfo(data)
      $router.push({ path: '/home' })
    }
  } catch (error) {
    console.log(error)
  }

}
const onChange = () => { }
// 网站备案跳转
const linkBeianMiit = () => {
  window.open("http://www.beian.miit.gov.cn")
}

onMounted(() => {
  publicKeyAjax()
})

</script>
<template>
  <div class="login-wrapper">
    <div class="login-container" :style="scaleStyle">
      <h2 class="form-title">城市道路照明综合管理系统</h2>
      <div class="form-item form-name">
        <el-input class="form-input" :max-length="30" v-model.trim="state.userName" placeholder="请输入用户名称" />
      </div>
      <div class="form-item form-pwd">
        <el-input class="form-input" type="password" v-model.trim="state.password" show-password :max-length="30"
          placeholder="请输入登录密码" @keyup.enter="login" />
      </div>
      <div class="form-auto-login">
        <el-checkbox type="checkbox" :checked="state.checked" name="remember-me" @change="onChange">
          <span class="label">自动登录</span>
        </el-checkbox>
      </div>
      <div>
        <el-button class="btn-login" @click="login" :loading="state.isBtnLoading">登录</el-button>
      </div>
      <div class="row-link clearfloat">
        <router-link to="/findPwd" class="forget-pwd-link">忘记密码?
        </router-link>
      </div>
    </div>
    <div class="u_login_record">
      <P>网站备案/许可证号：<span @click="linkBeianMiit" class="u_link_number">鄂ICP备2023005102号-1 </span>
         |  技术支持：湖北国信天宇智能科技有限公司</P>
      <p>地址：中国湖北省武汉市江汉区青鸾路 </p>
    </div>
  </div>
</template>
<style scoped lang="less">
.login-wrapper {
  height: 100%;
  width: 100%;
  background-image: url("./images/login.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  background-size: cover;
  position: relative;
}

.u_login_record {
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  bottom: 10%;
  font-size: 12px;
  color: #ffffff;

  p {
    line-height: 22px;
    text-align: center;

    .u_link_number {
      cursor: pointer;
    }
  }
}

.login-container {
  position: absolute;
  // top: 50%;
  // bottom: 50%;
  right: 119px;
  width: 638px;
  height: 474px;
  border-radius: 4px;
  background: rgba(255, 250, 250, 1);
  box-shadow: 0px 9px 23px 0px rgba(78, 78, 78, 0.75);

  .form-title {
    margin: 34px auto 30px;
    font-size: 36px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    text-align: center;
  }

  .form-item {
    position: relative;
    width: 380px;
    height: 60px;
    margin: 0 auto;

    .icon-show-pwd {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
    }

    &.form-pwd {
      margin: 10px auto 0;
    }

    &:before {
      z-index: 1;
      position: absolute;
      left: 10px;
      top: 50%;
      width: 30px;
      height: 30px;
      content: "";
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    &.form-name:before {
      background: url(./images/user.png) no-repeat center;
      background-size: contain;
    }

    &.form-pwd:before {
      background: url(./images/password.png) no-repeat center;
      background-size: contain;
    }

    .form-input {
      position: relative;
      width: 380px;
      height: 60px;
      padding-left: 60px;
      font-size: 22px;
      border: 1px solid #cacaca;
      border-radius: 4px;
      box-sizing: border-box;

      &:before {
        z-index: 1;
        position: absolute;
        left: 10px;
        top: 0;
        width: 30px;
        height: 30px;
        content: "";
        transform: translateY(-50%);
      }
    }
  }

  .form-auto-login {
    width: 125px;
    height: 18px;
    color: rgba(164, 164, 164, 1);
    margin: 10px 129px 37px;
    padding-left: 3px;

    .label {
      font-size: 18px;
      color: #a4a4a4;
    }
  }

  .btn-login {
    margin: 0 129px;
    width: 380px;
    height: 60px;
    font-size: 28px !important;
    border: 0;
    color: #ffffff;
    background: rgba(255, 78, 86, 1);
    box-shadow: 0px 1px 1px 0px rgba(132, 132, 132, 0.75);
    border-radius: 4px;

    &.ant-btn::focus {
      color: inherit !important;
      background-color: inherit !important;
      border-color: inherit !important;
    }
  }

  .row-link {
    width: 380px;
    margin: 29px auto 0;

    .register-link,
    .forget-pwd-link {
      vertical-align: top;
      font-size: 18px;
      color: #a4a4a4;
    }

    .download-link {
      vertical-align: top;
      font-size: 18px;
      float: right;
      color: #a4a4a4;
      cursor: pointer;

      img {
        width: 13px;
        vertical-align: top;
        margin-right: 4px;
        margin-top: 5px;
      }
    }

    .forget-pwd-link {
      float: left;
    }
  }
}

.download-content {
  padding: 10px 20px 0;
}
</style>